import React, {PureComponent} from 'react';
import moment from 'moment';
import {connect} from 'dva';
import {List, Card, Row, Col, Radio, Input,DatePicker, Tag, Badge, Button, Icon, Dropdown, Menu, Avatar} from 'antd';
import {Link} from 'dva/router';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import ChooseUserModal from '../../components/service/ChooseUserModal';
import ChangePriceModal from '../../components/service/ChangePriceModal';

import styles from './BasicList.less';
import ListStyles from './ServiceOrderList.less';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const {RangePicker} = DatePicker;
const {Search} = Input;

@connect(state => ({
    service_order: state.service_order,
}))
export default class ServiceOrderList extends PureComponent {
    state = {
        status: '',
        keyword: '',
        pagination: {size: 10, page: 1, total: 0},
        visible: false,
        created_at: [],
        currentItem: {}
    }

    componentDidMount() {
        this.props.dispatch({
            type: 'service_order/fetch',
        });
        this.props.dispatch({
            type: 'service_order/info',
        });
    }

    componentDidCatch(error, errorInfo) {
        console.log(error,errorInfo)
    }

    onSearch = (value) => {
        this.setState({
            keyword: value,
        });
        this.loadData(this.state.pagination.page, this.state.pagination.size, value, this.state.status);
    }

    onPageChange = (page, pageSize) => {
        console.log(page, pageSize);
        this.loadData(page, pageSize, this.state.keyword, this.state.status);
    }

    onRightClick = (item, key) => {
        console.log(item, key);
        switch (key) {
            case 'send':
                this.state.currentItem = item;
                this.setState({
                    currentItem: item
                })
                this.props.dispatch({
                    type: 'service_order/changeChooseVisible',
                    payload: true,

                });
                this.props.dispatch({
                    type: 'service_order/fecthSupports',
                    payload: {order_id: item.id,city:item.city, service_id: item.service_id}
                })
                break;
            case 'cancle':
                this.props.dispatch({
                    type: 'service_order/cancel',
                    payload: {id: item.id},
                    callback: () => {

                        this.loadData(this.state.pagination.page, this.state.pagination.size, this.state.keyword, this.state.status);
                    },
                });
                break;
            case 'delete':
                this.props.dispatch({
                    type: 'service_order/remove',
                    payload: {id: item.id},
                    callback: () => {

                        this.loadData(this.state.pagination.page, this.state.pagination.size, this.state.keyword, this.state.status);

                    },
                });
                break;
            default:
                break;
        }
    }

    onTimeChange = (dates) => {
        console.log(dates)
        this.state.created_at = dates
        this.loadData(this.state.pagination.page, this.state.pagination.size, this.state.keyword, this.state.status);
    }

    loadData = (page, pageSize, keyword, status) => {
        let payload = {
            size: pageSize,
            page,
            status,
            keyword,
        }
        if (this.state.created_at.length > 0) {
            payload.created_at = [
                this.state.created_at[0].format('YYYY-MM-DD HH:mm:ss'),
                this.state.created_at[1].format('YYYY-MM-DD HH:mm:ss')
            ]
        }
        this.props.dispatch({
            type: 'service_order/fetch',
            payload: payload
        });
    }

    render() {
        const {service_order: {data, info, loading}} = this.props;
        const pagination = data.pagination;
        const item = this.state.currentItem;
        pagination.onChange = this.onPageChange;
        this.setState({
            pagination,
        });
        const Info = ({title, value, bordered}) => (
            <div className={styles.headerInfo}>
                <span>{title}</span>
                <p>{value}</p>
                {bordered && <em/>}
            </div>
        );

        const extraContent = (
            <Row className={styles.extraContent}>
                <Row >

                <RadioGroup
                    onChange={(e) => {
                        console.log(e);
                        this.setState({
                            status: e.target.value,
                        });
                        this.props.dispatch({
                            type: 'service_order/fetch',
                            payload: {
                                size: this.state.pagination.size,
                                page: this.state.pagination.page,
                                status: e.target.value,
                            },
                        });
                    }}
                    defaultValue={this.state.status}
                >
                    <RadioButton value="">全部</RadioButton>
                    <RadioButton value={0}>进行中</RadioButton>
                    <RadioButton value={1}>待接单</RadioButton>
                    <RadioButton value={2}>待验收</RadioButton>
                    <RadioButton value={3}>等待付款</RadioButton>
                    <RadioButton value={4}>已完成</RadioButton>
                    <RadioButton value={5}>已取消</RadioButton>

                </RadioGroup>
                </Row>
                <Row gutter={16} style={{marginTop: 8}}>
                    <Col span={12}>
                        <Search
                            defaultValue={this.state.keyword}
                            className={styles.extraContentSearch}
                            placeholder="请输入"
                            onSearch={(value) => {
                                this.onSearch(value);
                            }}
                        />
                    </Col>
                    <Col span={12}>
                        <RangePicker  onChange={this.onTimeChange}/>
                    </Col>
                </Row>

            </Row>
        );

        const ListContent = ({item}) => (
            <Row style={{flex: 1}} gutter={16}>

                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>
                    <span>订单号</span>
                    <p>{item.order_no}</p>
                </Col>
                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>
                    <span>用户名</span>
                    <p>{item.user.name}</p>
                </Col>
                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>
                    <span>地址</span>
                    <p>{item.address}</p>
                </Col>
                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>
                    <span>服务类型</span>
                    <p><Tag color="cyan">{item.service.name}</Tag></p>
                </Col>


                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>
                    <span>服务价格</span>
                    <p><Tag color="orange">{Number(item.price) === 0 ? '正在议价' : `￥ ${item.price}`}</Tag></p>
                </Col>
                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>
                    <span>状态</span>
                    <p><Badge status={item.status_class}/>{item.order_status_label}</p>
                </Col>
                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>
                    <span>服务师傅</span>
                    <p>{item.support_user ? (<Link
                        to={`/service/order/${item.support_user ? item.support_user.id : 0}`}>{item.support_user ? item.support_user.info.true_name : '等待派单'}</Link>) : '等待派单'}</p>
                </Col>
                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>
                    <span>预约时间</span>
                    <p>{item.created_at}</p>
                </Col>
            </Row>
        );

        const menu = item => (
            <Menu onClick={({key}) => {
                this.onRightClick(item, key);
            }}
            >
                <Menu.Item disabled={item.order_status != 0} key="send">
                    派遣师傅
                </Menu.Item>
                <Menu.Item disabled={item.order_status != 0} key="cancel">
                    取消订单
                </Menu.Item>
                <Menu.Item disabled={item.order_status != 4} key="delete">
                    删除订单
                </Menu.Item>
            </Menu>
        );

        const MoreBtn = item => (
            <Dropdown overlay={menu(item)}>
                <a>
                    更多操作 <Icon type="down"/>
                </a>
            </Dropdown>
        );

        return (
            <PageHeaderLayout>
                <div className={styles.standardList}>
                    <Card bordered={false}>
                        <Row>
                            <Col sm={8} xs={24}>
                                <Info title="待处理" value={`${info.ing}个订单`} bordered/>
                            </Col>
                            <Col sm={8} xs={24}>
                                <Info title="已完成" value={`${info.payed}个订单`} bordered/>
                            </Col>
                            <Col sm={8} xs={24}>
                                <Info title="被作废" value={`${info.cancel}个订单`}/>
                            </Col>
                        </Row>
                    </Card>

                    <Card
                        className={styles.listCard}
                        bordered={false}
                        title="订单列表"
                        style={{marginTop: 24}}
                        bodyStyle={{padding: '0 32px 40px 32px'}}
                        extra={extraContent}
                    >
                        <List
                            size="large"
                            rowKey="id"
                            loading={loading}
                            pagination={pagination}
                            dataSource={data.list}
                            renderItem={item => (
                                <List.Item
                                    actions={[<Link to={`/service/order/${item.id}`}>查看详情</Link>,
                                        MoreBtn(item),
                                    ]}
                                >
                                    <List.Item.Meta
                                        style={{marginRight: 16}}
                                        avatar={<Avatar src={item.user.avatar} shape="square" size="large"/>}
                                        title={<Link to={`/manager/list/${item.id}`}>{item.contact_name}</Link>}
                                        description={item.contact_phone}
                                    />
                                    <ListContent item={item}/>
                                </List.Item>
                            )}
                        />
                    </Card>
                </div>
                <ChooseUserModal item={item}/>
                <ChangePriceModal item={item}/>
            </PageHeaderLayout>
        );
    }
}
